<!DOCTYPE html>
<html lang="zh-CN" style="width: 100%;height: 100%;">

<head>
    <meta charset="UTF-8">
    <script src="../js/ezuikit.js"></script>
</head>

<body style="width: 100%;height: 100%;margin: 0;overflow: hidden;">
    <div id="videoContainer" style="width: 100%;height: 100%;"></div>
</body>

<script>
    let player;

    window.onbeforeunload = () => {
        player?.destroy();
        player = null;
    };

    const getParams = () => {
        const url = window.location.href;
        if (url.indexOf('?') > 0) {
            const arr = url.split('?')[1].split('&');
            const obj = {};
            for (let i = 0; i < arr.length; i++) {
                const arr_list = arr[i].split('=');
                obj[arr_list[0]] = arr_list[1];
            }
            return obj;
        }
    };

    const { accessToken, deviceSerial, channelNo, noFullScreen, } = getParams();

    const initPlayer = () => {
        player = new EZUIKit.EZUIKitPlayer({
            id: 'videoContainer',
            accessToken: accessToken,
            url: `ezopen://open.ys7.com/${deviceSerial}/${channelNo}.live`,
            themeData: {
                'header': {
                    'color': '#1890ff',
                    'activeColor': '#FFFFFF',
                    'backgroundColor': '#000000',
                    'btnList': [],
                },
                'footer': {
                    'color': '#FFFFFF',
                    'activeColor': '#1890FF',
                    'backgroundColor': '#00000021',
                    'btnList': [
                        {
                            'iconId': 'play',
                            'part': 'left',
                            'defaultActive': 1,
                            'memo': '播放',
                            'isrender': 1
                        },
                        {
                            'iconId': 'capturePicture',
                            'part': 'left',
                            'defaultActive': 0,
                            'memo': '截屏按钮',
                            'isrender': 1
                        },
                        {
                            'iconId': 'sound',
                            'part': 'left',
                            'defaultActive': 0,
                            'memo': '声音按钮',
                            'isrender': 1
                        },
                        {
                            'iconId': 'talk',
                            'part': 'left',
                            'defaultActive': 0,
                            'memo': '对讲按钮',
                            'isrender': 1
                        },
                        {
                            'iconId': 'zoom',
                            'part': 'left',
                            'defaultActive': 0,
                            'memo': '电子放大',
                            'isrender': 1
                        },
                        {
                            'iconId': 'hd',
                            'part': 'right',
                            'defaultActive': 0,
                            'memo': '清晰度切换按钮',
                            'isrender': 1
                        },
                        {
                            'iconId': 'webExpend',
                            'part': 'right',
                            'defaultActive': 0,
                            'memo': '网页全屏按钮',
                            'isrender': noFullScreen ? 0 : 1,
                        },
                        {
                            'iconId': 'expend',
                            'part': 'right',
                            'defaultActive': 0,
                            'memo': '全局全屏按钮',
                            'isrender': noFullScreen ? 0 : 1,
                        }
                    ],
                },
            },
        });
        player.play();
    };

    initPlayer();
</script>

</html>